<template>
    <div>
        <layout-content>
            <div slot="main">
                <!--查询-->
                <Form label-position="right" :label-width="120">
                    <Row>

                        <#if classInfo.fieldList?exists && classInfo.fieldList?size gt 0>
                            <#list classInfo.fieldList as fieldItem >
                                <Col span="8">
                                <FormItem label="${fieldItem.fieldComment} ：">
                                    <Input v-model="select.${fieldItem.fieldName}"/>
                                </FormItem>
                                </Col>

                            </#list>

                        </#if>
                        <Col>
                        <FormItem :label-width="0">
                            <div style="float: right">
                                <Button type="primary" icon="ios-search" style="margin-right: 10px" @click="selectWriters">查询</Button>
                                <Button
                                        type="primary"
                                        icon="ios-download-outline"
                                        style="margin-right: 10px"
                                        @click="exportToExcel"
                                        :loading="exportLoading">导出
                                </Button>
                                <Button @click="reset" style="margin-right: 10px">重置</Button>
                                <span class="scale" v-if="spread" @click="spread = !spread">收起<Icon type="ios-arrow-up"/></span>
                                <span class="scale" v-if="!spread" @click="spread = !spread">展开<Icon type="ios-arrow-down"/></span>
                            </div>
                        </FormItem>
                        </Col>
                    </Row>
                </Form>

                <div v-for="item in allList">
                    <#if classInfo.fieldList?exists && classInfo.fieldList?size gt 0>
                        <#list classInfo.fieldList as fieldItem >
<#--                            {{item.${fieldItem.fieldComment}}}-->
<#--                            {{${fieldItem.fieldComment}}}-->
                            ${fieldItem.fieldComment}:
                            {{item.${fieldItem.fieldName}}}
                        </#list>

                    </#if>
                </div>
                <div style="margin-bottom: 20px;">
                    <Button icon="md-add" type="primary" @click="handleAdd" style="margin-right: 20px" ghost>添加作家</Button>
                    <Button icon="md-trash" type="error" @click="handleBatchDelete" ghost>批量删除</Button>
                    <RadioGroup v-model="display" type="button" button-style="solid" style="float: right;">
                        <Radio label="平铺"></Radio>
                        <Radio label="列表"></Radio>
                    </RadioGroup>
                    <div style="float: right; margin: 5px 30px 5px 0">筛选中国作协会员：
                        <i-switch v-model="filterChinaWriter" @change="selectWriters">
                            <span slot="open">开</span>
                            <span slot="close">关</span>
                        </i-switch>
                    </div>
                    <div style="float: right; margin: 5px 30px 5px 0">屏蔽不再联系的作家：
                        <i-switch v-model="status" @change="selectWriters">
                            <span slot="open">开</span>
                            <span slot="close">关</span>
                        </i-switch>
                    </div>
                </div>
                <template v-if="display === '平铺'">
<#--                    <Row>-->
<#--                        <Col span="8" v-for="writer of allList" style="padding: 10px">-->
<#--                        <writer-info-card :info="writer"></writer-info-card>-->
<#--                        </Col>-->
<#--                    </Row>-->
                </template>
                <template v-if="display === '列表'">
                    <Table :columns="columns" :data="allList" ref="selection" :loading="searchLoading">
                        <!--              这么离谱 这里不用配置列表项-->
                        <!--              配置在 columns-->
<#--                        <template slot-scope="{ row,index }" slot="name">-->
<#--                            <!--                  <Button @click="handleUpdate(index)" >{{row.name}}</Button>&ndash;&gt;-->

<#--                            <div  @click="handleUpdate(index)">{{row.name}}</div>-->
<#--                        </template>-->
<#--                        <template slot-scope="{ row,index }" slot="state">-->
<#--                            <Tag color="red" v-if="row.status === '2'">离世</Tag>-->
<#--                            <Tag color="red" v-if="row.status === '3'">转出</Tag>-->
<#--                            <Tag color="red" v-if="row.status === '4'">退会</Tag>-->
<#--                            <state-tag v-if="row.status === '1'" :state="row.verify ? row.verify.verifyState : null"/>-->
<#--                        </template>-->
<#--                        <template slot-scope="{ row,index }" slot="chinaWriter">-->
<#--                            <Tag color="green" v-if="row.chinaWriter">是</Tag>-->
<#--                            <Tag color="red" v-else>否</Tag>-->
<#--                        </template>-->
                        <template slot-scope="{ row, index }" slot="action">
                            <Button type="text" size="small" style="margin-right: 10px; color: #2d8cf0" @click="handleUpdate(index)">
                                修改
                            </Button>
                            <Divider type="vertical"/>
                            <Button type="text" size="small" style="margin-right: 10px; color: #2d8cf0" @click="exportToWord(index)">
                                导出
                            </Button>
                            <Divider type="vertical"/>
                            <Button type="text" size="small" style="margin-right: 10px; color: #ed4014" @click="handleDelete(index)">
                                删除
                            </Button>
                        </template>
                    </Table>
                </template>
                <div style="margin: 20px; text-align: center">
                    <Page :current="select.pageNum" :total="total" :page-size="select.pageSize"
                          show-elevator @on-change="pageChange" show-total/>
                </div>
                <!--        898 total 每页是 10？ 这样是 89页， 每页是9 那要90页啊 都不是。。 不对啊 898/10==89...8 那确实要90页 -->
                <!--        那 数据不是少了吗  显示 是每页只有9个 啊 -->
            </div>
        </layout-content>
        <Modal v-model="del.modal" width="360" class-name="vertical-center-modal">
            <p slot="header" style="color:#f60;text-align:center">
                <Icon type="ios-information-circle"/>
                <span>删除警告</span>
            </p>
            <div style="text-align:center">
                <p>{{ del.title }}</p>
                <p style="color: #ed4014">(删除作家信息时会删除其作品和专辑信息)</p>
            </div>
            <div slot="footer">
                <Button @click="del.modal = false">取消</Button>
                <Button type="error" :loading="del.loading" @click="deleteWriter">删除</Button>
            </div>
        </Modal>
    </div>
</template>

<script>
    import LayoutContent from "../../components/layout/layout-content";
    // import {batchDelete, deleteWriter, exportToWord, selectWriters} from "../../api/writer";
    <#--import {batchDelete, deleteOne, exportToWord,selectAll,selectPage} from "../../api/${classInfo.className?uncap_first}";-->
    <#--import {batchDelete, deleteOne, exportToWord,selectAll,selectPage} from "../../api/${classInfo.className?uncap_first}";-->
    import {batchDelete, deleteOne, exportToWord,selectAll,selectPage} from "../../utils/request";

    // import {batchDelete, deleteWriter, exportToWord, selectWriters} from "../../api/writer";
    import WriterInfoCard from "../../components/card/writer-info-card";
    import FieldSelect from "../../components/input/field-select";
    import TeamSelect from "../../components/input/team-select";
    import {export2Excel} from "../../utils/excel";
    import {writerColumns} from "../../utils/dictData";
    import {resetDict} from "../../utils/common";
    import StateTag from "../../components/tag/state-tag";
    import { mapGetters } from "vuex";
    // https://www.cnblogs.com/aidixie/p/14980957.html
    export default {
        name: "writer-manage",
        components: {StateTag, TeamSelect, FieldSelect, WriterInfoCard, LayoutContent},

        beforeDestroy: function () {
            window.removeEventListener('resize', this.handleResize)
        },

        // https://blog.csdn.net/Little_Pig_Bug/article/details/88408445
        data() {
            return {
                spread: true,
                fullWidth:document.documentElement.clientWidth,

                select: {
                    <#if classInfo.fieldList?exists && classInfo.fieldList?size gt 0>
                    <#list classInfo.fieldList as fieldItem >
            ${fieldItem.fieldName}: '',
                </#list>

                </#if>

                pageNum: 1,
                pageSize: 10

                    // 会 显示9个 是因为他吗 不是因为后台
                    // 确实有问题 ，这里要写10个 ，才是正常的诶
                    // 那个控件要改掉他 每页的个数吧
                    // 只有 90页  这样显示不全的吧
                    // 只要给 total 就可以工作了吧
                },
                status:0,
                display: '列表',
                writerList: [],
                columns: [
                    {
                        type: 'selection',
                        width: 60,
                        align: 'center'
                    },
                    {
                        type: 'index',
                        width: 60,
                        align: 'center'
                    },

            <#if classInfo.fieldList?exists && classInfo.fieldList?size gt 0>
            <#list classInfo.fieldList as fieldItem >
                {
                    title: '${fieldItem.fieldComment}',
                    key: '${fieldItem.fieldName}',
                  //  slot:"${fieldItem.fieldName}",
                    // 这里要配置 slot 才能被抓到
                    width: 100
                },
                </#list>

                </#if>

                    {
                        title: '操作',
                        slot: 'action',
                        fixed: 'right',
                        width: 240,
                        align: 'center'
                    }

                ],
                total: 0,
                allList:[],
                searchLoading: false,
                exportLoading: false,
                del: {
                    loading: false,
                    modal: false,
                    index: 0,
                    type: '',
                    title: '',
                    widList: []
                },
                statusList: [
                    {value: '1', label: '正常'},
                    {value: '2', label: '离世'},
                    {value: '3', label: '转出'},
                    {value: '4', label: '退会'}
                ]
            }
        },
        created() {
            // this.selectWriters();
            // this.selectAll();
            this.selectPage()
            window.addEventListener('resize', this.handleResize)
        },
        computed: {
            ...mapGetters([
                'isCollapse',
            ]),
            rightWidth(){
                let leftWidth = this.isCollapse ? '64' : '200';
                console.log(this.fullWidth)
                return (this.fullWidth-leftWidth)+'px'
            },

            filterChinaWriter: {
                get() {
                    return false;
                },
                set(val) {
                    this.select.chinaWriter = val ? 1 : null;
                }
            }
        },
        methods: {

            selectPage() {
                this.searchLoading = true;
                selectPage(this.select,this.select.pageNum,
                    // this.select.pageSize).then(res => {
                    this.select.pageSize,this.urlRoot).then(res => {
                    // this.writerList = res.data.data.list;
                    // this.allList = res.data.data.list;
                    this.allList = res.data.data.list||res.data.data;
                this.total = res.data.data.total;
                this.searchLoading = false;
            })
            },

            handleResize (event) {
                this.fullWidth = document.documentElement.clientWidth
            },
            handleAdd() {
                // this.$router.push({name: 'WriterInfoEdit'});
                this.$router.push({name: '${classInfo.className}InfoEdit'});
            },
            handleUpdate(index) {
                // this.$router.push({name: 'WriterInfoEdit', query: {wid: this.writerList[index].wid}});
                this.$router.push({name: '${classInfo.className}InfoEdit', query: {id: this.allList[index].id}});
            },
            handleDelete(index) {
                this.del.index = index;
                this.del.title = '您确定要删除该作家吗？';
                this.del.type = 'delete';
                this.del.modal = true;
            },
            handleBatchDelete() {
                let selectList = this.$refs.selection.getSelection();
                if (selectList.length === 0) {
                    this.$Message.error('请选择要删除的作家');
                    return;
                }
                this.del.widList.splice(0, this.del.widList.length);
                for (let item of selectList) {
                    this.del.widList.push(item.wid);
                }
                this.del.modal = true;
                this.del.title = '您确定要批量删除这些作家吗？';
                this.del.type = 'batchDelete';
            },
            deleteWriter() {
                if (this.del.type === 'delete') {
                    deleteWriter(this.writerList[this.del.index].wid).then(() => {
                        this.$Message.success('删除成功');
                    this.del.loading = false;
                    this.del.modal = false;
                    // 删除了自己的用户信息, 刷新一下个人信息
                    if (this.writerList[this.del.index].telephone === this.$store.state.user.telephone) {
                        this.$store.dispatch('user/getLoginInfo').then(() => {})
                    }

                    this.selectWriters();
                })
                } else if (this.del.type === 'batchDelete') {
                    batchDelete(this.del.widList).then(() => {
                        this.$Message.success('删除成功');
                    this.del.loading = false;
                    this.del.modal = false;
                    this.selectWriters();
                })
                }
            },
            selectWriters() {
                this.searchLoading = true;
                selectWriters(this.select).then(res => {
                    this.writerList = res.data.data.list;
                this.total = res.data.data.total;
                this.searchLoading = false;
            })
            },

            selectAll() {
                this.searchLoading = true;
                selectAll(this.select).then(res => {
                    // this.writerList = res.data.data.list;
                    this.allList = res.data.data.list;
                this.total = res.data.data.total;
                this.searchLoading = false;
            })
            },
            // 下面选中了 哪个page  一共有90页
            pageChange(index) {
                this.select.pageNum = index;
                this.selectWriters();
            },
            exportToExcel() {
                this.select.pageSize = 99999;
                this.exportLoading = true;
                selectWriters(this.select).then(res => {
                    export2Excel(writerColumns, res.data.data.list, '作家查询下载结果');
                this.select.pageSize = 9;
                this.exportLoading = false;
            })
            },
            exportToWord(index) {
                exportToWord(this.writerList[index].wid).then(res => {
                    const a = document.createElement('a');
                let blob = new Blob([res.data],{type: 'application/msword'});
                const link = document.createElement('a');
                let fName = this.writerList[index].name;
                link.href = URL.createObjectURL(blob);
                link.style.display = 'none';
                link.setAttribute('download', fName);
                document.body.appendChild(link);
                link.click();
                document.body.removeChild(link);
            })
            },
            // 重置查询
            reset() {
                resetDict(this.select);
            },
            changeSelectTeamId(val) {
                this.select.teamId = val;
            }
        }
    }
</script>

<style scoped>
    .scale {
        color: #2d8cf0;
    }

    .scale:hover {
        cursor: pointer;
    }
</style>
